<template>
  <div class="pre-warning">
      <div class="filter">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item prop="institutionName">
            <el-input
              v-model="queryParams.hospitalName"
              placeholder="请输入医院名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
          <el-table :data="tableData" border fit style="width: 100%" header-cell-class-name="table-header-cell"
          :class="tableData.length === 0 ? 'table-empty' : ''">
<!--            <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
              label="序号"
              type="index"
              width="80">
            </el-table-column>
            <el-table-column label="医院名称" align="center" prop="institutionName" />
            <el-table-column label="预警类型" align="center" prop="name" />
            <el-table-column label="预警日期" align="center" prop="warnTime" />
              <el-table-column label="操作" width="300">
                  <template slot-scope="scope">
                      <div class="operation">
                          <div   @click="handleView(scope.row)">查看</div>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </div>
    <pagination
      class="pager"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="查看信息" :visible.sync="open" width="50%"
               :before-close="handleClose" class="edit-dialog" top="40vh">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <div class="edit-box">
          <div class="citem" >
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext" >医院名称: &nbsp;{{form.institutionName }}</p>
          </div>
          <div class="citem">
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext"  >预警类型: &nbsp;{{form.name }}</p>
          </div>

          <div class="citem">
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext"  >登记号: &nbsp;{{form.registerNumber }}</p>
          </div>
          <div class="citem">
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext"  >组织机构名称: &nbsp;{{form.name }}</p>
          </div>
          <div class="citem">
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext" >许可证截止日期: &nbsp;{{form.applyEndDate }}</p>
          </div>
          <div class="citem">
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext" >社会信用代码: &nbsp;{{form.creditCode }}</p>
          </div>
          <div class="citem">
            <img src="@/assets/fronts/round.png" class="cimage">
            <p class="ctext" >下一校验期: &nbsp;{{form.nextCheckDate }}</p>
          </div>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
  import { warningstatistics, warningstatisticsInfo} from "@/api/his/statistics";
export default {
  name: 'PreWarning',
  data() {
      return {
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 国家机构表格数据
        nationList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          registerNumber: null,
          hospitalName: null
        },
        // 表单参数
        form: {},
          tableConfig: [
              {
                  prop: 'order',
                  label: '序号',
              },
              {
                  prop: 'hospitalName',
                  label: '医院名称',
              },
              {
                  prop: 'medicalAreaname',
                  label: '辖区',
              },
              {
                  prop: 'name',
                  label: '预警类型',
              },
              {
                  prop: 'warnTime',
                  label: '预警日期',
              },
          ],
          tableData: [
          ],
          keyword: null,
          region: null,
          warningType: null,
          regionOptions: [],
          warningOptions: [],
      }
  },
  created() {
    this.getList();
  },
  methods: {
    handleView(row) {
      this.open = true;
      warningstatisticsInfo(row.id).then(response => {
        this.form = response.data;
        this.form.institutionName = row.institutionName
        this.form.name = row.name
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.queryParams.hospitalName = '',
      this.handleQuery();
    },
    getList() {
      warningstatistics(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        const newTotal = response.total; // 假设这里是获取到的新total
              this.$emit('total-updated', newTotal);
      });
    }
  }
}
</script>
<style scoped lang="scss">
.pre-warning {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.citem{
  display: flex;
  align-items: center;
  height: 30px;
  .cimage{
    margin-right: 0px;
    width:30px;
    height: 30px;
    display:inline-block;
  }
  .ctext{
    display: inline-block;
    text-align: left;
  }
}
.filter {
  display: flex;
  align-items: center;

  .el-select {
      width: 150px;
      height: 47px;
      margin-right: 11px;

      ::v-deep input {
          width: 150px;
          height: 47px;
      }
  }

  .search-input {
      width: 264px;
      height: 47px;
      background: #FFFFFF;
      border-radius: 5px;
      margin-right: 11px;

      ::v-deep input {
          line-height: 45px;
          height: 47px;
          display: inline-block;
      }

      ::v-deep .el-input__icon {
          line-height: 45px;
          height: 45px;
          vertical-align: -0.15em;
          color: #4373F1;
      }
  }

  .search-btn {
      width: 109px;
      height: 47px;
      background: #4373F1;
      border-radius: 5px;
      cursor: pointer;
      user-select: none;
      color: #fff;
      line-height: 47px;
      text-align: center;
  }
}
.table {
  flex: 1;
  background-color: #fff;
  margin: 13px 0 16px;

  ::v-deep .table-header-cell {
      background-color: #EBEFF8;
      padding-left: 21px;
      font-weight: 500;
      font-size: 16px;
      color: #414141;
  }

  .el-table {
      height: 100%;
  }

  ::v-deep .el-table__cell {
      padding-left: 21px;
      font-weight: 500;
      font-size: 16px;
      color: #414141;
  }

  :v-deep .el-table__body-wrapper {
      height: 100%;
  }

  :v-deep .el-table__empty-block {
      height: 100%;
  }

  .operation {
      display: flex;
      align-items: center;
      height: 100%;

      .view {
          cursor: pointer;
          font-weight: 500;
          font-size: 16px;
          color: #414141;
          height: 16px;
          line-height: 16px;
          background-repeat: no-repeat;
          background-position: 0 center;
          margin-right: 20px;
          user-select: none;
      }

      .handle {
          margin-left: 77px;
          user-select: none;
          cursor: pointer;
          text-align: center;
          line-height: 32px;
          width: 78px;
          height: 32px;
          background: #4373F1;
          border-radius: 5px;
          font-weight: 500;
          font-size: 16px;
          color: #FFFFFF;
      }
  }
}
.pager {
  height: 50px;
  margin: 10px;
}
</style>
